<template>
  <div id="app" class='div' v-cloak>
      <router-view></router-view>
      <div class="footer">
        <mt-tabbar>
          <mt-tab-item id="外卖">
            <img slot="icon" src="../assets/img/店铺.png">
            店铺
          </mt-tab-item>
		  
          <mt-tab-item id="订单">
            <img slot="icon" src="../assets/img/我的店铺客服.png">
            客服
          </mt-tab-item>
          <mt-tab-item id="发现">
            <img slot="icon" src="../assets/img/收藏.png">
            收藏
          </mt-tab-item>
		  
          <mt-tab-item id="me" style="margin-top:1px; margin-left:-26px;">
			  <div class='gowu'>
				  <div class='gowu-left'>加入购物车</div>
				  <div class='gowu-right'>立即购买</div>
			  </div>
				
          </mt-tab-item>
        </mt-tabbar>
      </div>
   
 
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    
  }
 },
}
</script>

<style lang="less" scoped='scoped'>
.gowu{
	width: 150px;
	height: 44px;
	display:flex;
	justify-content: space-around;
}
.gowu>div{
	width: 50%;
	height: 44px;
	text-align: center;
	line-height: 44px;
	color: white;
}
.gowu-left{
	background-color:sandybrown;
    border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
}
.gowu-right{
	background-color: orangered;
    border-top-right-radius: 22px;
	border-bottom-right-radius: 22px;
}
.div{
	position: fixed;
	z-index: 200;
}
.footer{
    height:44px;
	display: flex;
	justify-content: space-around;
	
}
.addCar{
	position: fixed;
	bottom: 0;
      height: 28px;
    background:#FFC500;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: 17px 0 0 17px;
    color: white;
}
.buy{
    height: 28px;
    background:#FF7000;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: 0 17px 17px 0;
    color: white;
    // line-height: 36px;
}
.footer a{
  margin-left: -65px;
  z-index: 100;
}

</style>
